<template>
  <div class="help-warpper">
    <div class="help-center">
      <div class="help-header">
        <h3>帮助中心</h3>
      </div>
      <div class="help-con">
        <div class="help-sidebar">
          <p v-for="(item, index) in helpList" :key="index">{{ item.label }}</p>
        </div>
        <div class="help-article">
          <h3 />
          <p />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      helpList: [
        {
          label: '软件使用指南',
          article: [
            {
              type: 'title',
              value: '软件使用指南'
            },
            {
              type: 'text',
              value: '内容'
            }
          ]
        }
      ]
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.help-warpper {
  padding: 12px 20px 0;
  .help-center {
    background: #fff;
    border-radius: 4px;
    .help-header {
      display: flex;
      align-items: center;
      padding-left: 20px;
      height: 56px;
      border-bottom: 1px solid #ECEEF2;
    }
    .help-con {
      display: flex;
      padding: 18px 20px 20px;
      .help-sidebar {
        max-width: 240px;
        p {
          &:active {
            color: #4E78EF;
          }
        }
      }
      .help-article {
        max-width: 940px;
        height: 612px;
        background-color: #F7F8FA;
      }
    }
  }
}
</style>
